// 编写懒加载指令

// 插件 和 指令

// 1.插件

/**
 vue2如何实现插件？
  1. 插件定义
     对象定义法
     const plugin = {
       install(Vue){
          // 实现插件的核心逻辑
       }
     }
     函数定义法
     function plugin(Vue){
      // 实现插件的核心逻辑
     }
  2. 插件注册
     Vue.use(plugin) 注意需要在new实例化之前进行

插件都可以做哪些事儿？
  凡是可以依赖于Vue构造函数完成的事儿都可以定义为插件
   1. 全局组件注册  Vue.component()
   2. 全局指令注册  Vue.directive()
   3. 给原型对象挂载东西 让每一个组件this  Vue.prototype.$eventBus
*/

/**
  vue3中插件语法的变化
    插件定义到注册的流程没有发生变化
    变化的是参数的语义(实参)
    const plugin = {
      install(app){
        // 实现插件的核心功能
      }
    }
    createApp().use(plugin)
 */

// 2.指令
/**
  vue2里如何定义全局指令？
    Vue.directive('指令的名称',{
      inserted(el,binding){
        // el: 指令绑定到元素身上 指的是哪个元素dom对象
        // binding: binding.value  指令等于号后面表达式的值 v-if="show"
      }
    })

  vue3中全局指令的变化？
   app.direcvie('指令的名称',{
      mounted(el,binding){
        // el: 指令绑定到元素身上 指的是哪个元素dom对象
        // binding: binding.value  指令等于号后面表达式的值 v-if="show"
      }
   })

 */
import { useIntersectionObserver } from '@vueuse/core'
// 导入默认图片
import defaultImg from '@/assets/images/200.png'
const directivePlugin = {
  // 当我们去注册该插件的时候 vue会自动执行这个install方法
  // 并且把app应用实例对象当成实参传入
  // 这里的app实参就是createApp方法得到的应用实例对象
  install (app) {
    // 核心逻辑实现 todo
    // 目标：全局指令的注册
    // app.directive()
    console.log(app)
    // 实现全局指令的注册即可
    // mainjs注册该插件 -> install执行 -> 传入app -> app.directive执行 -> 全局指令就注册好了！！！
    app.directive('lazy-img', {
      mounted (el, binding) {
        console.log(el, binding.value)
        // 懒加载核心逻辑实现
        // 图片懒加载思路：只有图片进入到视口区域之后才正式发送图片链接请求
        // 1. 如何知道图片进入到视口区域？useIntersectionObserver
        // 2. 如何控制图片发送请求？img.src = 'url'
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            // isIntersecting:元素进入到视口区域 true
            // 不在视口区域 false
            // 当首次完成图片正式加载之后 监听就应该停止才对
            console.log(isIntersecting)
            // 错误先行
            if (isIntersecting) {
              // 容错处理
              el.onerror = function () {
                el.src = defaultImg
              }
              // 正式发送请求
              el.src = binding.value
              // 停止监听
              stop()
            }
          }
        )
      }
    })
  }
}

export default directivePlugin
